<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-11-12 13:46:07
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-11-12 15:48:20
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-11-12 13:46:07
-->
<template>
  <div>
    <a-card title="基本用法">
      <a-space size="large">
        <a-statistic title="Downloads" :value="125670" show-group-separator />
        <a-statistic extra="Comments" :value="40509" :precision="2" />
      </a-space>
    </a-card>
    <a-card title="自定义前缀&后缀">
      <a-space size="large">
        <a-statistic title="New Users" :value="125670" show-group-separator>
          <template #suffix>
            <a-icon name="xiangshangjiantou"></a-icon>
          </template>
        </a-statistic>
        <a-statistic
          title="User Growth Rate"
          :value="50.52"
          :precision="2"
          :value-style="{ color: '#0fbf60' }"
        >
          <template #prefix>
            <a-icon name="-xiangshangjiantou"></a-icon>
          </template>
          <template #suffix>%</template>
        </a-statistic>
      </a-space>
    </a-card>
    <a-card title="数值动画">
      <a-statistic
        title="User Growth Rate"
        :value="50.52"
        :precision="2"
        :value-from="0"
        :start="start"
        animation
      >
        <template #prefix>
          <a-icon name="-xiangshangjiantou"></a-icon>
        </template>
        <template #suffix>%</template>
      </a-statistic>
      <a-button @click="start = true">Start</a-button>
    </a-card>
    <a-card title="倒计时">
      <a-row>
        <a-col :flex="1">
          <a-countdown
            title="Countdown"
            :value="now + 1000 * 60 * 60 * 2"
            :now="now"
          />
        </a-col>
        <a-col :flex="1">
          <a-countdown
            title="Milliseconds"
            :value="now + 1000 * 60 * 60 * 2"
            :now="now"
            format="HH:mm:ss.SSS"
          />
        </a-col>
        <a-col :flex="1">
          <a-countdown
            title="Days"
            :value="now + 1000 * 60 * 60 * 24 * 4"
            :now="now"
            format="D 天 H 时 m 分 s 秒"
          />
        </a-col>
      </a-row>
      <a-space direction="vertical" style="margin-top: 10px">
        <a-countdown
          title="Trigger on finish"
          :value="Date.now() + 5 * 1000"
          format="mm:ss.SSS"
          :now="Date.now()"
          :start="start"
          @finish="handleFinish"
        />
        <a-button type="primary" @click="start = true">Start</a-button>
      </a-space>
    </a-card>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const start = ref(false);

    const now = Date.now();

    const handleFinish = () => {
      console.log("我完成了");
      // Message.info("Finish");
    };

    return {
      start,
      now,
      handleFinish,
    };
  },
};
</script>
